<template>
  <div class="home">
    <top />

    <el-container>
      <el-aside width="200px"> </el-aside>
      <el-main>
        <div>
          <h3>设备运行情况</h3>
          <el-progress
            type="circle"
            :percentage="58"
          ></el-progress>
          <el-progress
            v-if="!isNaN((this.num2 / this.num4) * 100)"
            type="circle"
            :percentage="Math.ceil((this.num2 / this.num4) * 100)"
          ></el-progress>
          <el-progress
            v-if="!isNaN((this.num3 / this.num4) * 100)"
            type="circle"
            :percentage="Math.ceil(((this.num3 + this.num1) / this.num4) * 100)"
          ></el-progress>
          <p>
            <span style="padding-left: 30px">运行率</span>
            <span style="padding-left: 90px">故障率</span>
            <span style="padding-left: 80px"> 开机率 </span>
          </p>
        </div>
        <h3>订单数据详细</h3>
        <div style="width: 400px; height: 400px;padding-top:30px" ref="echarts1"></div>

        <h3>年度订单情况汇总</h3>
        <div style="width: 400px; height: 400px" ref="echarts2"></div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
// @ is an alias to /src
import Top from "@/components/Top.vue";
// eslint-disable-next-line no-unused-vars
import echarts from "echarts";

export default {
  name: "home",
  data() {
    return {
      mechineState1: "启用",
      mechineState2: "故障",
      mechineState3: "空闲",
      num1: 0,
      num2: 0,
      num3: 0,
      num4: 0,
      user:{},
      factoryId:this.$route.query.factoryId,
      chart: null,
      option: {
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)",
        },
        legend: {
          orient: "vertical",
          left: 10,
          data: ["待接单", "生产中", "已接单", "已完成", "已拒绝"],
        },
        series: [
          {
          name: "订单详情",
          type: "pie",
          radius: ["50%", "66%"],
          avoidLabelOverlap: false,
          label: {
            show: false,
            position: "center",
          },
          emphasis: {
            label: {
              show: true,
              fontSize: "30",
              fontWeight: "bold",
            },
          },
          labelLine: {
            show: false,
          },
          data: [
            { value: 6, name: "待接单" },
            { value: 14, name: "已接单" },
            { value: 9, name: "生产中" },
            { value: 5, name: "已完成" },
            { value: 3, name: "已拒绝" },
          ],
          },
        ],
      },
      option2:{
        color: ["#3398DB"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          left: "0%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
        {
          type: "category",
          data: [
            "一月",
            "二月",
            "三月",
            "四月",
            "五月",
            "六月",
            "七月",
            "八月",
            "九月",
            "十月",
            "十一月",
            "十二月",
          ],
          axisTick: {
            alignWithLabel: true,
          },
        },
        ],
        yAxis: [
        {
          type: "value",
        }
        ],
        series: [
        {
          name: "订单数量",
          type: "bar",
          barWidth: "40%",
          data: [10, 5, 13, 11, 16, 13, 12, 15, 15, 8, 7, 19],
        },
      ],
      },
    }
  },
  created(){
    this.user = this.$getSessionStorage('user');
    console.log(this.user);
    if(this.user != null){
      this.getMechine();
    }else{
      this.$router.push({path:"/"})
    }

  },
  mounted() {


    this.chart = echarts.init(this.$refs.echarts1);
    this.chart.setOption(this.option);

    this.chart = echarts.init(this.$refs.echarts2);
    this.chart.setOption(this.option2);
  },
  methods: {
    getMechine() {
      this.$axios
        .post(
          "MechineController/runNum",
          this.$qs.stringify({ mechineState: this.mechineState1 })
        )
        .then((value) => {
          this.num1 = value.data;
          console.log(value.data);
        })
        .catch((value) => {
          console.error(value);
        });

      this.$axios
        .post(
          "MechineController/runNum",
          this.$qs.stringify({ mechineState: this.mechineState2 })
        )
        .then((value) => {
          this.num2 = value.data;
          console.log(value.data);
        })
        .catch((value) => {
          console.error(value);
        });

      this.$axios
        .post(
          "MechineController/runNum",
          this.$qs.stringify({ mechineState: this.mechineState3 })
        )
        .then((value) => {
          this.num3 = value.data;
          console.log(value.data);
        })
        .catch((value) => {
          console.error(value);
        });

      this.$axios
        .post("MechineController/allNum")
        .then((value) => {
          this.num4 = value.data;
          console.log(value.data);
        })
        .catch((value) => {
          console.error(value);
        });
    },
  },
  components: {
    Top,
  },
};
</script>

